* {
    font-family: "Courier New";
    font-size: 14px;
}

.man {
    background-color: #DDD;
    background-image: url('../images/arrow.png');
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    z-index: 1;
}

div.man-0 {
    background-image: url('../images/arrow_blue.png');
}

div.man-2 {
    background-image: url('../images/arrow_green.png');
}

div.man-3 {
    background-image: url('../images/arrow_pink.png');
}

div.man-4 {
    background-image: url('../images/arrow_sky.png');
}

.man span {
    color: #000;
    font-size: 14px;
    font-family: "Courier New";
    background: #fff;
    background: rgba(255,255,255,0.5);
    padding: 2px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: block;
    margin-top: -25px;
    background-repeat: no-repeat;
    background-position: 6px 2px;
    height: 16px;
    text-indent: 24px;
    line-height: 16px;
    width: 90px;
    z-index: 10;
    margin-left: -20px;
    box-shadow: 1px 1px 5px #000;
    -moz-box-shadow: 1px 1px 5px #000;
}

.man span.shoot {
    background-image: url('../images/fire.png');
}

.man span.dead {
    background-image: url('../images/skull.png');
}

.man span.move {
    background-image: url('../images/foot.png');
}

.fog {
    background: #DDD;
}

.wall {
    background-color: #DDD;
    background-image: url('../images/wall.jpg');
}

.direction-0 {
    background-color: transparent;
    background-position: -50px 0;
}

.direction-1 {
    background-color: transparent;
    background-position: -100px 0;
}

.direction-2 {
    background-color: transparent;
    background-position: -150px 0;
}

.direction-3 {
    background-color: transparent;
    background-position: -200px 0;
}

.ball {
    width: 50px;
    height: 50px;
    background: url('../images/ball.png') no-repeat center center;
}